<template>
  <div class='drawBack' v-title='"抽奖"'>
    <div class='integralData'>
      <span class='surplus'>{{record.userCurTimes=='0'?'0':(record.userCurTimes|| recordView.remainTimes)}}/6</span>
      <span class='point'>{{record.point || recordView.needPoints}}</span>
      <span class='userCurPoint'>{{aggregate}}</span>
    </div>
    <div class='twinkle' id='deng'>
      <div id='luck'>
        <table cellspacing='3'>
          <tr>
            <td class='luck-unit luck-unit-0'>
              <img v-show='records[0]&&records[0].productImg' :src='records[0]&&records[0].productImg'>
              <span>{{records[0]&&records[0].productName}}</span>
            </td>
            <td class='luck-unit luck-unit-1'>
              <img v-show='records[1]&&records[1].productImg' :src='records[1]&&records[1].productImg'>
              <span>{{records[1]&&records[1].productName}}</span>
            </td>
            <td class='luck-unit luck-unit-2'>
              <img v-show='records[2]&&records[2].productImg' :src='records[2]&&records[2].productImg'>
              <span>{{records[2]&&records[2].productName}}</span>
            </td>
          </tr>
          <tr>
            <td class='luck-unit luck-unit-7'>
              <img v-show='records[7]&&records[7].productImg' :src='records[7]&&records[7].productImg'>
              <span>{{records[7]&&records[7].productName}}</span>
            </td>
            <td class='cjBtn' id='btn' @click='btn()'></td>
            <td class='luck-unit luck-unit-3'>
              <img v-show='records[3]&&records[3].productImg' :src='records[3]&&records[3].productImg'>
              <span>{{records[3]&&records[3].productName}}</span>
            </td>
          </tr>
          <tr>
            <td class='luck-unit luck-unit-6'>
              <img v-show='records[6]&&records[6].productImg' :src='records[6]&&records[6].productImg'>
              <span>{{records[6]&&records[6].productName}}</span>
            </td>
            <td class='luck-unit luck-unit-5'>
              <img v-show='records[5]&&records[5].productImg' :src='records[5]&&records[5].productImg'>
              <span>{{records[5]&&records[5].productName}}</span>
            </td>
            <td class='luck-unit luck-unit-4'>
              <img v-show='records[4]&&records[4].productImg' :src='records[4]&&records[4].productImg'>
              <span>{{records[4]&&records[4].productName}}</span>
            </td>
          </tr>
        </table>
      </div>
      <!-- luckEnd -->
    </div>
    <div class='cover' v-show='prizeAlertShow' @touchmove.stop.prevent>
      <div class='moduleBox' :class='{ "moduleBox":prizeAlertShow}'>
        <div class='participation'>
          <p>
            <span class="lottery" v-show='isEableLottery== "Y" && record.isWin=="Y"'>恭喜您抽中</span>
            <span>{{isEableLottery=='Y'&& record.isWin=='Y' ? record.giftName : isEableLottery=='Y'&& record.isWin=='N'? record.giftName : isEableLottery=='N' && ( pointDraw===false ? true : insufficientDraw===false ? true : false) ? '您目前的薏米不足' : isEableLottery=='N'&& (record.userCurTimes==0 || recordView.remainTimes==0)? '今日抽奖次数已用完':'网路数据异常稍后再试' }}</span>
          </p>
          <div class='participationClose' v-show='(isEableLottery=="Y" && (record.bombBoxType=="2"))'>
            <span @click='close()'>我知道了</span>
            <i>|</i>
            <span @click='useGift()'>立即使用</span>
          </div>
          <div @click='close()' class='participationClose' v-show='isEableLottery=="N" || record.bombBoxType=="1"'>
            <span>我知道了</span>
          </div>
        </div>
      </div>
    </div>
    <div class='rule '>
      <p v-html='recordView.activityText'></p>
    </div>
    <div class='huiStatement textC'>
      —本次活动最终解释权归“慧驿站”所有—<br> 本活动与苹果公司无关
    </div>
  </div>
</template>
<script>
import { cookie } from '@/util/cookie' //  引用创建的util.js文件，并使用getCookie方法
import { addClass, removeClass, getByClassName } from '@/common/js/dom' //  引用dom方法
import { getUrlParam, getOS } from '@/util/merge'
export default {
  name: 'integralDraw',
  data() {
    return {
      index: -1, // 当前转动到哪个位置，起点位置
      count: 0, // 总共有多少个位置
      timer: 0, // setTimeout的ID，用clearTimeout清除
      speed: 20,  // 初始转动速度
      times: 0, // 转动次数
      cycle: 30,  // 转动基本次数：即至少需要转动多少次再进入抽奖环节
      prize: -1,  // 中奖位置
      prizeAlertShow: false,  // 弹框默认关闭
      record: {},
      recordView: {},
      records: [],
      isEableLottery: '',
      $deng: '',
      $btn: '',
      pointDraw: '',   // 抽奖后返回的积分是否充足
      insufficientDraw: '', // 第一次获取的积分是否充足
      inteNumber: 2,
      needPoints: '',
      zero: 2,
      zeroOne: '',
      click: false,
      num: 0,
      objDraw: [],
      aggregate: '', // 总积分
      aggregatePlus: '', // 抽奖完成后积分总和
      msg: ''
    }
  },
  methods: {
    luckView() {
      //  抽奖页面接口
      var _this = this;
      this.$post('/lotteryModule/queryPrizeList').then(function (res) {
        _this.recordView = res.record;
        _this.isEableLottery = res.record.isEableLottery; // 是否可以抽奖
        _this.needPoints = res.record.needPoints // 每次消耗积分
        _this.records = res.records;
        _this.aggregate = res.record.remainPoint  // 总积分
        if (parseInt(_this.recordView.remainPoint) < parseInt(_this.recordView.needPoints)) { // 积分不小于每次消耗的积分小于为false
          _this.isEableLottery = res.record.isEableLottery; // 是否可以抽奖
          _this.insufficientDraw = false;   // 积分不足
        } else {
          _this.insufficientDraw = true;   // 积分充足
        }
        for (var i = 0; i < res.records.length; i++) { // 获取中奖编号
          _this.objDraw.push(res.records[i].giftNo);
        }
        _this.init('luck'); // 1 .调用并传入抽奖页面 id luck
      })
    },
    init(id) {
      this.$luck = document.getElementById(id)
      this.luckUnit = getByClassName(this.$luck, 'luck-unit')
      if (this.luckUnit.length > 0) {       // 2.验证id页面奖品数量是否大于0
        this.count = this.luckUnit.length;                    // 获取并传入当前奖品数量
        var luckUnit = getByClassName(this.$luck, 'luck-unit-' + this.index)// 默认给当前奖品加上选中框
        for (var i = 0; i < luckUnit.length; i++) {
          addClass(luckUnit[i], 'active')
        }
      }
    },
    roll() {
      var luckUnit = getByClassName(this.$luck, 'luck-unit-' + this.index)  // 去除当前奖品的选中框
      for (let i = 0; i < luckUnit.length; i++) {
        removeClass(luckUnit[i], 'active')
      }
      this.index += 1;    // 递加index
      if (this.index > this.count - 1) {    // 判断index是否大于奖品位置数量 如果大于就直为0
        this.index = 0;
      };
      luckUnit = getByClassName(this.$luck, 'luck-unit-' + this.index)  // 递加后为当前奖品增加选中框
      for (let i = 0; i < luckUnit.length; i++) {
        addClass(luckUnit[i], 'active')
      }
      return false;
    },
    close() {
      this.prizeAlertShow = false;
    },
    // 调用抽奖跑马灯
    rolling() {
      this.times += 1;  // 转动次数递加
      this.roll();      // 调用去除和添加下个奖品的选中框方法
      if (this.times > (this.cycle + 10) && this.prize === this.index) {
        clearTimeout(this.timer);
        setTimeout(() => {
          this.prizeAlertShow = true;
          this.aggregate = this.aggregatePlus;
          this.click = false;
        }, 800);
        this.prize = -1;
        this.times = 0;
      } else {
        if (this.times < this.cycle) {  // 转动的次数小于转动的基本次数 就以每  10毫秒 加速
          this.speed -= 10;
        } else {
          if (this.times > (this.cycle + 10) && ((this.prize === 0 && this.index === 7) || this.prize === this.index + 1)) {
            this.speed += 110;
          } else {
            this.speed += 20;
          }
        }
        if (this.speed < 40) {
          this.speed = 40;
        }
        this.timer = setTimeout(() => {
          this.rolling()
        }, this.speed);
      }
      return false;
    },
    request() {  //  接口获取数据
      var _this = this;
      _this.$post('/lotteryModule/lottery').then(function (res) {
        _this.record = res.record;
        _this.aggregate = parseInt(parseInt(_this.aggregate) - parseInt(res.record.point || '0')); // 每次抽奖减去20积分
        _this.aggregatePlus = parseInt(res.record.userCurPoint);
        _this.msg = res.record.msg;
        if (res.record.userCurTimes === 0) {
          _this.zeroOne = res.record.userCurTimes // 剩余抽奖次数
          _this.zeroFn();
        } else {
          _this.isEableLottery = res.record.isEableLottery;
        }
        if (parseInt(res.record.userCurPoint) < parseInt(_this.needPoints)) { // 积分不小于每次消耗的积分小于为false
          _this.pointDraw = false;    // 积分不足
        } else {
          _this.pointDraw = true;   // 积分充足
        }
        if (_this.pointDraw === false) {
          _this.integralFn();
        }
        if (!res.record.msg) {
          var index;
          for (var i = 0; i < _this.objDraw.length; i++) {
            if (res.record.giftNo === _this.objDraw[i]) {
              index = i; // 获取中奖编号信息所对应的号
            }
          }
          _this.prize = index;// 抽奖结果与生成抽奖编号信息相等
          _this.rolling()
          _this.click = true;
        } else {
          _this.aggregate = _this.aggregatePlus;
          _this.isEableLottery = 'N'
          _this.prizeAlertShow = true
        }
      })
    },
    zeroFn() { // 最后一次为0时避免提前提示不能抽奖
      if (this.zeroOne === 0) {
        if (this.zero === 2) {
          this.isEableLottery = 'Y'
        }
        this.zero !== 2 ? this.isEableLottery = 'N' : this.zero = 2;
        this.zero--;
      }
    },
    integralFn() { // 积分为0时避免提前提示不能抽奖
      if (this.pointDraw === false) {
        if (this.inteNumber === 2) {
          this.isEableLottery = 'Y'
        }
        this.inteNumber !== 2 ? this.isEableLottery = 'N' : this.inteNumber = 2;
        this.inteNumber--;
      }
    },
    useGift() {
      if (getOS() === 'ios') {
        /* eslint-disable no-undef */
        lotteryHandler()
      }
      if (getOS() === 'android') {
        window.Hstation.getData()
      }
      this.prizeAlertShow = false
    },
    //  闪灯效果
    twinkle() {
      this.$deng = document.getElementById('deng')
      setInterval(() => {
        this.num++;
        if (this.num % 2 === 0) {
          addClass(this.$deng, 'twinkleTwo');
        } else {
          addClass(this.$deng, 'twinkle');
          removeClass(this.$deng, 'twinkleTwo');
        }
      }, 500)
    },
    btn() {
      this.$btn = document.getElementById('btn')
      addClass(this.$btn, 'cjBtnDom')
      setTimeout(() => {
        removeClass(this.$btn, 'cjBtnDom');
      }, 200);
      if (!this.click) {
        this.zeroFn();// 最后一次为0时避免提前提示不能抽奖
        this.integralFn();// 最后一次积分不足是避免提前提示积分不足
      }
      if (this.isEableLottery === 'Y') {
        if (this.click) {   // 第一次click默认为  false
          return false;
        } else {
          this.speed = 100;  // 第一次速度传入为100
          this.request()
          return false;
        }
      } else if (this.isEableLottery === 'N') {
        this.prizeAlertShow = true
      } else {
        return false;
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.token = getUrlParam('token')
      cookie('huiToken', this.token)
      this.luckView();
      this.twinkle();
    })
  }
}
</script>
<style>
.drawBack {
  background-image: url("../../assets/img/lbcj.png");
  background-repeat: no-repeat;
  background-size: 100%;
  font-family: "PingFangSC-Regular";
  width: 7.5rem;
  height: 18.7rem;
  padding-top: 5.16rem;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  background-color:#AB3BFD;
}
.integralData {
  position: relative;
  color: #fdfc00;
  font-weight: bold;
  font-family: DFPHeiW12;
  font-size: 0.22rem;
}
.integralData span.surplus {
  position: absolute;
  top: 0.04rem;
  left: 1.6rem;
}
.integralData span.point {
  position: absolute;
  top: 0.04rem;
  left: 3.75rem;
}
.integralData span.userCurPoint {
  position: absolute;
  top: 0.04rem;
  left: 6.05rem;
}
.twinkle,
.twinkleTwo {
  width: 6.5rem;
  height: 6.6rem;
  background-size: 100%;
  background-repeat: no-repeat;
  margin: 0.33rem auto 0 auto;
}
#deng {
  position: absolute;
  top: 5.45rem;
  left: 0.48rem;
}
.twinkle {
  background-image: url("../../assets/img/twinkle.png");
}
.twinkleTwo {
  background-image: url("../../assets/img/twinkleTwo.png");
}
.cjBtnDom,
.cjBtn,
.twinkle .active,
.twinkle td {
  width: 1.83rem;
  height: 1.84rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
.twinkle .cjBtn {
  background-image: url("../../assets/img/buttonUp.png");
}
.twinkle .cjBtnDom {
  background-image: url("../../assets/img/buttonDown.png");
}
#luck .active {
  background-image: url("../../assets/img/active.png");
}
.twinkle td img {
  width: 1.3rem;
  height: 1.1rem;
  background-size: 100%;
}
.twinkle td span {
  display: block;
  color: #8d5f5f;
  font-size: 0.22rem;
  font-family: PingFang-SC-Regular;
  margin-top: 0.15rem;
}
.twinkle td {
  padding-top: 0.13rem;
  text-align: center;
  vertical-align: top;
  background-image: url("../../assets/img/proBj.png");
}
.twinkle table {
  position: absolute;
  top: 0.377rem;
  left: 0.35rem;
  border-collapse: separate;
  border-spacing: 0.07rem 0.07rem;
}
.rule {
  margin: 1.35rem 0.4rem 0;
  line-height: 0.4rem;
  font-size: 0.24rem;
  color: #fff;
  text-align: left;
  font-family: MicrosoftYaHei-Bold;
  position: absolute;
  top: 12.3rem;
}
.huiStatement{
  width:100%;
  background-color:#AB3BFD;
  position:absolute;
  bottom:0;
  line-height: 0.4rem;
  font-size: 0.2rem;
  color: #000;
  font-family: MicrosoftYaHei-Bold;
  padding:0.6rem 0 0.2rem;
}
/*弹框盒子*/
.drawBack .moduleBox {
  width: 4.4rem;
  /* height: 2rem; */
  border-radius: 0.05rem;
  background-color: #a145fe;
  top: 34.5%;
  left: 50%;
  border-radius: 0.2rem;
  text-align: center;
}
/*弹框内容*/
.participation p {
  height: 0.5rem;
  padding: 0.25rem 0.5rem 1.1rem;
  line-height: 0.5rem;
  font-size: 0.35rem;
  color: #ff5a5a;
  background-color: #fff;
}
.participation .lottery {
  display: block;
}
.participationClose {
  background-color: #a145fe;
  height: 0.7rem;
  line-height: 0.7rem;
  border-bottom-left-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}
.participationClose i {
  color: #fff;
  font-size: 0.3rem;
  font-style: normal;
}
.participationClose span {
  padding: 0 0.3rem;
  cursor: pointer;
  color: #fff;
  font-size: 0.3rem;
}
</style>



